<script setup>
import { ref } from 'vue';
import {onLoad,onReachBottom,onPageScroll} from '@dcloudio/uni-app'
import {getBannerApi, getHomeListApi } from '@/api/api';
const bannerList = ref([])
const getBanner = async ()=>{
  const res = await getBannerApi()
  if(res.data.code !==1) return uni.$showToast()
  bannerList.value = res.data.data.bannerList
}
const keyword = ref('')
// 瀑布流数据
const flowList = ref([])
const getHomeList = async ()=>{
  const res = await getHomeListApi()
  if(res.data.code !==1) return uni.$showToast()
  flowList.value = res.data.data
  console.log('res',flowList.value);
  
}
onLoad(()=>{
  getBanner()
  getHomeList()
})
onReachBottom(()=>{
  setTimeout(()=>{
addRandomData()
  },1000)
  
})
const addRandomData = ()=>{
  for(let i=0;i<10;i++){
    let index= uni.$u.random(0,flowList.value.length-1)
    let item = JSON.parse(JSON.stringify(flowList.value[index]))
    item.id = uni.$u.guid()
    flowList.value.push(item)
  }
}


// 滚动是否显示
const showTopBtn = ref(false)
onPageScroll((e)=>{
  if(e.scrollTop>600){
    showTopBtn.value = true
  }else{
    showTopBtn.value = false
  }
})
const toTop = ()=>{
  uni.pageScrollTo({
    scrollTop:0,
    duration:300
  })
}
const goDetail = (value)=>{
  console.log(value);
  const temp = JSON.stringify(value)
  uni.navigateTo({
    url:`/pages/detail/detail?item=${encodeURIComponent(temp)}`
  })
}
</script>




<template>
	<view class="content">
    <up-search placeholder="搜索经典" bg-color="#e3e3e3" v-model="keyword"></up-search>
    <up-swiper circular v-if="bannerList.length" :list="bannerList" keyName="image" showTitle radius="8" :autoplay="true" height="160"></up-swiper>
    <up-notice-bar text="测试数据公告"></up-notice-bar>
    <view class="list">
      <up-waterfall v-model="flowList">
        <template v-slot:left="{leftList}">
          <view class="demo-water" v-for="(item,index) in leftList" :key="item.id" @click="goDetail(item)">
            <up-lazy-load threshold="-450" border-radius="10" :image="item.img" :index="index"></up-lazy-load>
            <view class="demo-title">
              {{item.title}}
            </view>
            <view class="demo-price">
              {{item.times}}
            </view>
            <view class="demo-tag">
              <view class="demo-tag-owner">
                {{item.tag[0]}}
              </view>
              <view class="demo-tag-text">
                {{item.tag[1]}}
              </view>
              <view class="isDot" v-if="item.isDot">
                {{item.isDot}}
              </view>
            </view>
          </view>
        </template>
        <template v-slot:right="{rightList}">
          <view class="demo-water" v-for="(item,index) in rightList" :key="item.id" @click="goDetail(item)">
            <up-lazy-load threshold="-450" border-radius="10" :image="item.img" :index="index"></up-lazy-load>
            <view class="demo-title">
              {{item.title}}
            </view>
            <view class="demo-price">
              {{item.times}}
            </view>
            <view class="demo-tag">
              <view class="demo-tag-owner">
                {{item.tag[0]}}
              </view>
              <view class="demo-tag-text">
                {{item.tag[1]}}
              </view>
              <view class="isDot" v-if="item.isDot">
                {{item.isDot}}
              </view>
            </view>
          </view>
        </template>
      </up-waterfall>
    </view>
    <view class="topClass" @click="toTop" v-show="showTopBtn">
      <up-icon name="arrow-upward" color="#fff" size="28"></up-icon>
    </view>
	</view>
</template>



<style lang="scss" scoped>
 .content {
   padding: 20rpx;
 }
 .list{
   margin: 30rpx 0;
   .demo-water{
     margin: 10rpx 10rpx 10rpx 0;
     background-color: #fff;
     border-radius: 16rpx;
     padding: 16rpx;
     position: relative;
   }
   .demo-title{
     font-size: 30rpx;
     margin-top: 10rpx;
     color: #303133;
   }
   .demo-price{
     font-size: 24rpx;
     color: #777;
     margin-top: 10rpx;
   }
   .demo-tag{
     display: flex;
     margin-top: 10rpx;
     .demo-tag-owner {
       border: 1px solid rgb(252,163,129);
       color: #ffaa00;
       font-size: 20rpx;
       display: flex;
       align-items: center;
       padding: 4rpx 14rpx;
       border-radius: 50rpx       
     }
     .demo-tag-text {
       border: 1px solid #00aaff;
       color: #00aaff;
       margin-left: 20rpx;
       border-radius: 50rpx;
       display: flex;
       padding: 4rpx 14rpx;
       align-items: center;
       font-size: 20rpx;
       
     }
   }
   .isDot{
     position: absolute;
     top: 20rpx;
     right: 20rpx;
     font-size: 24rpx;
     color: #fff;
     line-height: 32rpx;
     background-color: #ff0000;
     border-radius: 10rpx;
     padding: 4rpx 10rpx;
     text-align: center;
   }
 }
 .topClass{
   position: fixed;
   right: 30rpx;
   bottom: 120rpx;
   background-color: rgba(0,0,0,0.5);
   padding: 20rpx;
   width: 44rpx;
   height: 44rpx;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
 }
</style>
